<template>
  <div class="container">
    <!--    没有封装的-->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <template v-for="(item,index) in list">
        <!--        判断是否显示-->
        <template v-if="item.meta.isShow">
          <!--          判断是否有子元素-->
          <template v-if="item.children">
            <!--            有的话渲染成sub-menu-->
            <el-submenu :index="item.path" :key="index">
              <template #title>
                <i :class="item.meta.icon"></i>
                <span>{{ item.meta.title }}</span>
              </template>
              <!--              渲染子元素的-->
              <template v-for="(value,key) in item.children">
                <template v-if="value.meta.isShow">
                  <template v-if="value.children">
                    <el-submenu :index="value.path" :key="key">
                      <template #title>
                        <i :class="value.meta.icon"></i>
                        <span>{{ value.meta.title }}</span>
                      </template>
                      <!--                      这里也要判断遍历children-->
                      <template v-for="(v,k) in value.children">
                        <template v-if="v.meta.isShow">
                          <!--                          加入v也有children呢-->
                          <el-menu-item :index="value.path" :key="k">
                            <template #title>
                              <i :class="v.meta.icon"></i>
                              <span>{{ v.meta.title }}</span>
                            </template>
                          </el-menu-item>
                        </template>
                      </template>
                      <!--                      <el-menu-item :index="value.path" :key="key">{{ value.meta.title }}</el-menu-item>-->
                    </el-submenu>
                  </template>
                  <template v-else>
                    <el-menu-item :index="value.path" :key="key">
                      <template #title>
                        <i :class="value.meta.icon"></i>
                        <span>{{ value.meta.title }}</span>
                      </template>
                    </el-menu-item>
                  </template>
                </template>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <!--           没有的话是menu-item-->
            <el-menu-item :index="item.path" :key="index">
              <template #title>
                <i :class="item.meta.icon"></i>
                <span>{{ item.meta.title }}</span>
              </template>
            </el-menu-item>
          </template>

        </template>
      </template>

    </el-menu>
    <!--    封装的menu-item的-->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <template v-for="(item,index) in list">
        <!--        判断是否显示-->
        <template v-if="item.meta.isShow">
          <!--          判断是否有子元素-->
          <template v-if="item.children">
            <!--            有的话渲染成sub-menu-->
            <el-submenu :index="item.path" :key="index">
              <template #title>
                <i :class="item.meta.icon"></i>
                <span>{{ item.meta.title }}</span>
              </template>
              <!--              渲染子元素的-->
              <template v-for="(value,key) in item.children">
                <template v-if="value.meta.isShow">
                  <template v-if="value.children">
                    <el-submenu :index="value.path" :key="key">
                      <template #title>
                        <i :class="value.meta.icon"></i>
                        <span>{{ value.meta.title }}</span>
                      </template>
                      <!--                      这里也要判断遍历children-->
                      <template v-for="(v,k) in value.children">
                        <template v-if="v.meta.isShow">
                          <!--                          加入v也有children呢-->
                          <el-menu-item :index="value.path" :key="k">
                            <template #title>
                              <i :class="v.meta.icon"></i>
                              <span>{{ v.meta.title }}</span>
                            </template>
                          </el-menu-item>
                        </template>
                      </template>
                      <!--                      <el-menu-item :index="value.path" :key="key">{{ value.meta.title }}</el-menu-item>-->
                    </el-submenu>
                  </template>
                  <template v-else>
                    <el-menu-item :index="value.path" :key="key">
                      <template #title>
                        <i :class="value.meta.icon"></i>
                        <span>{{ value.meta.title }}</span>
                      </template>
                    </el-menu-item>
                  </template>
                </template>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <!--           没有的话是menu-item-->
            <item-view :path="item.path" :key="item.path" :icon="item.meta.icon" :title="item.meta.title"/>
          </template>
        </template>
      </template>
    </el-menu>
    <!--    封装了sub-menu-->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">

      <sub-menu-item :list="list"></sub-menu-item>

    </el-menu>

  </div>
</template>

<script>
// import { list } from '@/router/list'
import ItemView from '@/views/aside/menu/ItemView.vue'
import SubMenuItem from '@/views/aside/menu/SubMenuItem.vue'

export default {
  name: 'MenuDemo',
  components: {
    SubMenuItem,
    ItemView
  },
  data () {
    return {
      list: [
        {
          path: '/one',
          name: 'one',
          meta: {
            icon: 'el-icon-s-home',
            title: '1',
            isShow: true
          },
          children: [
            {
              path: '/one-one',
              name: 'one-one',
              meta: {
                icon: 'el-icon-s-home',
                title: '1-1',
                isShow: true
              },
              children: [

                {
                  path: '/one-one-one',
                  name: 'one-one-one',
                  meta: {
                    icon: 'el-icon-s-home',
                    title: '1-1-1',
                    isShow: true
                  },
                  children: [

                    {
                      path: '/one-one-one-one',
                      name: 'one-one-one-one',
                      meta: {
                        icon: 'el-icon-s-home',
                        title: '1-1-1-1',
                        isShow: true
                      }
                    }
                  ]
                }
              ]
            },
            {
              path: '/one-two',
              name: 'one-two',
              meta: {
                icon: 'el-icon-s-home',
                title: '1-2',
                isShow: true
              }
            }]
        },
        {
          path: '/two',
          name: 'two',
          meta: {
            icon: 'el-icon-s-home',
            title: '2',
            isShow: true
          },
          children: [
            {
              path: '/two-one',
              name: 'two-one',
              meta: {
                icon: 'el-icon-s-home',
                title: '2-1',
                isShow: true
              }
            }
          ]
        },
        {
          path: '/three',
          name: 'three',
          meta: {
            icon: 'el-icon-s-home',
            title: '3',
            isShow: true
          }
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  gap: 50px;
}

.el-menu-vertical-demo {
  width: 250px;
}
</style>
